<template>
  <!-- #ifdef MP-WEIXIN -->
  <view
    class="flex relative"
    :class="[props.direction == 'horizontal' ? 'flex-row flex-row-center-center' : '']"
    ref="contentbody"
  >
    <slot name="default"></slot>
  </view>
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <view class="flex flex-row flex-row-center-center">
    <view
      class="flex relative"
      :style="{ width: widthComputed }"
      :class="[props.direction == 'horizontal' ? 'flex-row flex-row-center-center' : '']"
      ref="contentbody"
    >
      <slot name="default"></slot>
    </view>
  </view>
  <!-- #endif -->
</template>
<script lang="ts" setup>
/**
 * 步骤条
 * @description 步骤条，可以方便的预览逻辑，事务条理。需要配合tm-steps-item组件，必须放置tm-steps-item组件才能使用。
 */
import { number } from "echarts";
import {
  computed,
  provide,
  ref,
  getCurrentInstance,
  watch,
  onUpdated,
  onMounted,
  nextTick,
  PropType,
} from "vue";
// #ifdef APP-PLUS-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
const props = defineProps({
  /**
   * 步骤条显示的方向。
   * horizontal|vertical
   */
  direction: {
    type: String as PropType<"horizontal" | "vertical">,
    default: "horizontal",
  },
  //当前的步骤。可使用v-model:current
  current: {
    type: [Number],
    default: 0,
  },
  //当前默认初始，显示的步骤数。
  defaultCurrent: {
    type: Number,
    default: 0,
  },
  /**
   * 当前步骤的状态。
   * 'wait' | 'process' | 'finish' | 'error'
   */
  status: {
    type: String as PropType<"wait" | "process" | "finish" | "error">,
    default: "",
  },
  //是否显示连线。
  showLine: {
    type: Boolean,
    default: true,
  },
  //是否允许点击步骤来切换当前步骤数。
  changeable: {
    type: Boolean,
    default: false,
  },
  /**
   * 当点击步骤切换前的勾子函数，返回fase将取消切换。可以返回Promise异步。
   */
  beforeStepChange: {
    type: [Function, Boolean],
    default: () => false,
  },

  //这里提供，如果子组件tm-steps-item没有提供使用此值。如果子组件提供了，不会使用这里的参数。
  //未激活时的主题色
  color: {
    type: String,
    default: "grey-3",
  },
  //激活时的主题色。这里提供，如果子组件tm-steps-item没有提供使用此值。如果子组件提供了，不会使用这里的参数。
  activeColor: {
    type: String,
    default: "primary",
  },
  //样式dot,number
  type: {
    type: String,
    default: "dot",
  },
});
/**
 * 事件说明
 * change 当前切换步骤时触发。
 * update:current 即v-model:current
 * step-click 当点击步骤时触发。
 */
const emits = defineEmits(["change", "update:current", "step-click"]);
const proxy = getCurrentInstance()?.proxy ?? null;
const _current = ref(props.defaultCurrent ?? -1);
const _countCurrent = ref(-1);
const _width = ref(0);
const widthComputed = computed(() => Math.ceil(uni.upx2px(_width.value)) + "px");

const compoenentName = "tmSteps";

function pushKey(width: number = 150) {
  _countCurrent.value += 1;
  _width.value += width;
  return _countCurrent.value;
}
function delKey(width: number = 150) {
  _countCurrent.value -= 1;
  _width.value -= width;
  return _countCurrent.value;
}
watch(
  () => props.current,
  () => {
    _current.value = props.current;
    emits("change", _current.value);
  }
);

function steplick(index: number) {
  _current.value = index;
  emits("step-click", index);
  emits("update:current", _current.value);
}

provide(
  "tmStepsCureent",
  computed(() => _current.value)
);
provide(
  "tmStepsCountCureent",
  computed(() => _countCurrent.value)
);
provide(
  "tmStepsCountActiveColor",
  computed(() => props.activeColor)
);
provide(
  "tmStepsCountColor",
  computed(() => props.color)
);

defineExpose({ pushKey, compoenentName, steplick, delKey });
</script>

<style></style>
